<template>
  <bsCard v-loading="loading" class="businessIncome-wrapper" :width="getBsLRWPercent(520)" :height="`${cardHeight}px`">
    <div class="bs-card-title">一般公共预算收入</div>
    <app-echarts :height="`${cardHeight - cardTitleHeight - 20}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getOperatingIncome } from '@/api/bigscreen'
export default {
  name: 'businessIncome',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      echartsOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel: {
              // rotate: 15
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位:亿元',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '收入',
            data: [],
            type: 'line',
            areaStyle: {
              color: 'rgba(236,128,141,0.8)'
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#EC808D'
                }
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getOperatingIncome()
        if (res.resultCode === 200) {
          let data = res.resultData.sort((a, b) => {
            return +a - +b
          })
          this.renderData(data || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderData(data) {
      const queryTimeArr = []
      const operateIncomeArr = []
      for (let perdata of data) {
        queryTimeArr.push(perdata.queryTime)
        operateIncomeArr.push(perdata.operateIncome)
      }

      // xAxis
      this.echartsOption.xAxis[0].data = queryTimeArr
      // series
      this.echartsOption.series[0].data = operateIncomeArr
    }
  }
}
</script>

<style lang='scss'>
.businessIncome-wrapper {
}
</style>
